<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../css/element.css" rel="stylesheet"/>
    <link href="../css/styleindex.css" rel="stylesheet"/>
    <link href="../css/swiper.min.css" rel="stylesheet"/>
    <style>

    </style>
</head>
<body style="background:#EFF0F4;">

  <div class="mui-content">
    <div id="vm" class="x-examok" v-cloak>
      <div class="x-header-g" id="header">
        <a class="x-header-arrow" @click="api.closeWin()"></a>
        <div class="x-header-t">制定人才培养计划</div>
      </div>
      <!--  -->
      <div class="x-train-tabs swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide x-train-items" v-for="(item,index) in tabsdata" :key="item.id" @click="changetab(index,item.id)" :class="{active:curId==index}">{{item.title}}</div>
        </div>
      </div>
      <!--  -->
      <div class="x-pro-list" v-for="(item,index) in prodata" :key="item.key">
        <div class="x-pro-top">人才培养计划{{index+1}}</div>
        <div class="x-pro-row">
          <div class="x-pro-label">姓名:</div>
          <div class="x-pro-input">
            <el-select v-model="item.memberid" placeholder="请选择" :disabled="isfromindex" @change="getnameselect(item.memberid,index)">
              <el-option v-for="itemk in perdata" :key="itemk.id" :label="itemk.username" :value="itemk.id"></el-option>
            </el-select>
          </div>
        </div>
        <div class="x-pro-row">
          <div class="x-pro-label">晋升通道:</div>
          <div class="x-pro-input">
            <el-select v-model="item.promoteid" placeholder="请选择" :disabled="isfromindex" @change="tochangelevel(item.promoteid,index)">
              <el-option v-for="item in growupdata" :key="item.id" :label="item.title" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
        <div class="x-pro-row">
          <div class="x-pro-label">原职级:</div>
          <div class="x-pro-input">
            <el-input placeholder="请输入内容" v-model="item.pre_level" disabled="true"></el-input>
          </div>
        </div>
        <div class="x-pro-row">
          <div class="x-pro-label">培养职级:</div>
          <div class="x-pro-input">
            <el-select v-model="item.joblevelid" placeholder="请选择" :disabled="isfromindex">
              <el-option v-for="item in leveldata" :key="item.id" :label="item.title" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
        <div class="x-pro-row x-pro-rowblock">
          <div class="x-pro-label">学习内容:</div>
          <div class="x-pro-input">
            <el-input placeholder="请输入内容" v-model="item.content" type="textarea" :rows="4" :disabled="isfromindex"></el-input>
          </div>
        </div>
        <div class="x-pro-row">
          <div class="x-pro-label">负责人:</div>
          <div class="x-pro-input">
            <el-select v-model="item.set_memberid" placeholder="请选择" :disabled="isfromindex">
              <el-option v-for="item in perdata" :key="item.id" :label="item.username" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
        <!-- <div class="x-pro-row">
          <div class="x-pro-label">填报人:</div>
          <div class="x-pro-input">
            <el-select v-model="item.tracker_memberid" placeholder="请选择" :disabled="isfromindex">
              <el-option v-for="item in perdata" :key="item.id" :label="item.username" :value="item.id"></el-option>
            </el-select>
          </div>
        </div> -->
        <div class="x-pro-remove" @click="removeentrywork(index)" v-show="!isfromindex">删除</div>
      </div>
      <!--  -->
      <div class="x-pro-addbox" @click="goonentrywork"  v-show="!isfromindex"><span class="x-pro-addicon"></span>添加人才培养计划</div>
      <!--  -->
      <div class="x-pro-gobtn" @click="isok" v-show="!isfromindex">提交</div>
    </div>
  </div>

  <script type="text/javascript" src="../script/vue.js"></script>
  <script type="text/javascript" src="../script/element.js"></script>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/base.js"></script>
  <script type="text/javascript" src="../script/swiper.min.js"></script>
	<script>
apiready = function () {
    $api.fixStatusBar($api.byId('header'));
    var tdate = api.pageParam.date;

    //
    var vm = new Vue({
      el:'#vm',
      data(){
        return{
          curId:0,
          tabsdata:[],
          thdate:'',
          deptid:'',
          prodata:[],
          isfromindex:false,
          positiondata:'',//职位
          notkey:false,
          genderdata:[{
            'title':'不限',
            'id':'0'
          },{
            'title':'男',
            'id':'1'
          },{
            'title':'女',
            'id':'2'
          }],
          entryworkindex:0,
          onlyfirst:true,
          perdata:'',
          beforename:'',
          growupdata:'',
          levelid:'',
          leveldata:'',

        }
      },
      created:function() {
        var that=this;


      },
      mounted:function(){
        var that=this;
        that.thdate = tdate;
        that.getperson()//人
        that.getgrowup()//通道
        that.backshow()

      },
      methods: {
        changetab:function(index,id){
          var that = this;
          that.curId = index;
          that.deptid = id;
          that.backshow()
          that.getperson()
        },
        //人
        getperson:function(){
          let that=this;
          api.ajax({
            url:baseurl+'admin/member/list',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken')
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              console.log(JSON.stringify(ret));
              if(ret.status == 1){
                that.perdata = ret.data.list;

              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
        //原职级
        getnameselect:function(val,index){
          var that = this;
          // that.beforename = val;
          that.getbefore(val,index)

        },
        //获取原职级
        getbefore:function(id,index){
          let that=this;
          console.log(index);
          var tindex = index;
          api.ajax({
            url:baseurl+'api/member/info',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken'),
                id:id
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              console.log('info:'+JSON.stringify(ret));
              if(ret.status == 1){
                that.prodata[tindex].pre_level = ret.data.level_title;
                that.prodata = that.prodata
                console.log(JSON.stringify(that.prodata));
              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
        //
        backshow:function(){
          let that=this;
          api.ajax({
            url:baseurl+'api/meeting/getMonthTrainPerson',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken'),
                date:that.thdate,
                deptid:that.deptid
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              console.log(JSON.stringify(ret));
              if(ret.status == 1){
                  for(var i=0;i<ret.data.depts.length;i++){
                    that.tabsdata.push({
                      'title':ret.data.depts[i].title,
                      'id':ret.data.depts[i].id,
                    })
                  }
                  if(that.onlyfirst){
                    that.deptid = ret.data.depts[0].id;
                    that.onlyfirst = false;
                  }

                  that.prodata = ret.data.list;
                  for(var i=0;i<that.prodata.length;i++){
                    that.getleveldata(that.prodata[i].promoteid)
                  }

                  var nunum;
                  if(that.tabsdata.length<3){
                    nunum = 2;
                  }else{
                    nunum = 3;
                  }
                  that.$nextTick(function(){
                    var mySwiper = new Swiper('.swiper-container',{
                      freeMode: true,
                      loop:false,//设置 active slide 居中后，会有左右留白现象，添加此会让未尾的导航补齐前后空白
                      slideToClickedSlide: true,//设置为true则点击slide会过渡到这个slide。
                      slidesPerView: nunum,
                      centeredSlides: false,//设定为true时，active slide会居中，而不是默认状态下的居左。
                      spaceBetween: 10,//slide之间设置距离
                      slidesOffsetBefore: 0,//设定slide与左边框的预设偏移量
                      slidesOffsetAfter: 0,//设定slide与右边框的预设偏移量

                    });

                  });
              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
        //晋升通道
        getgrowup:function(){
          let that=this;
          api.ajax({
            url:baseurl+'api/practice/promoteSection',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken'),
                subid:that.deptid
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              console.log(JSON.stringify(ret));
              if(ret.status == 1){
                  that.growupdata = ret.data.list;
              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
        //培养职级
        tochangelevel:function(val,index){
          console.log(val);
          var that = this;
          // that.prodata[index].
          // that.levelid = val;
          console.log(index);
          // that.prodata[index].joblevelid = '';
          that.getleveldata(val)
        },
        // asdf:function(val,index){
        //   var that = this;
        //   that.prodata[index].joblevelid = val;
        //   console.log(JSON.stringify(that.prodata));
        // },
        //获取职级
        getleveldata:function(val){
          let that=this;
          api.ajax({
            url:baseurl+'api/practice/jobLevelBypromote',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken'),
                id:val
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              console.log(JSON.stringify(ret));
              if(ret.status == 1){
                  that.leveldata = ret.data.list;
              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
        //删除
        removeentrywork:function(index){
          let that = this;
          var nowin = index;
          console.log(JSON.stringify(that.prodata));
          api.confirm({
            title: '操作提示',
            msg: '确定要删除吗？',
            buttons: ['确定','取消']
          }, function(ret, err) {
            var index = ret.buttonIndex;
            if(index == 1){
              //删除
              that.prodata.splice(nowin,1);//删除全部数组中对应的值
              console.log(JSON.stringify(that.prodata));
            }
          });
        },
        //继续添加
        goonentrywork:function(){
          var that = this;
          that.entryworkindex++
          that.prodata.push({
            'jobid':'',
            'age':'',
            'gender':'',
            'work_length':'',
            'wage':'',
            'num':'',
            'times':'',
            'job_source':'',
            'index':that.entryworkindex,
          });
        },
        //提交
        isok:function(){
          var that = this;
          console.log(JSON.stringify(that.prodata));
          api.ajax({
            url:baseurl+'api/meeting/addMonthTrainPerson',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken'),
                date:that.thdate,
                deptid:that.deptid,
                person_json:that.prodata

              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              console.log(JSON.stringify(ret));
              if(ret.status == 1){
                api.alert({
                    title: '提交成功',
                    msg: '',
                }, function(ret, err) {

                });

              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
      }
    })
	}


	</script>
</body>
</html>
